<template>
  <div class="login-container">
    <div class="login-box">
      <el-form ref="loginFormRef"
               label-position="right"
               label-width="70px"
               :model="loginForm"
               :rules="loginRules"
               class="login-form"
               status-icon>
        <el-form-item label="用户名 "
                      prop="userName">
          <el-input v-model="loginForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="密码"
                      prop="password">
          <el-input type="password"
                    v-model="loginForm.password"></el-input>
        </el-form-item>

        <router-link to="/register"
                     tag="div"
                     class="register-style">立即注册</router-link>

        <el-form-item class="btns">
          <el-button type="primary"
                     @click="submitForm('loginFormRef')">登录</el-button>
          <el-button @click="resetForm('loginFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.]).{8,12}$/;
        if (!reg.test(value)) {
          callback(
            new Error(
              '密码要求8-12位，必须包含大小写，特殊字符（”-_!@#$%^&*~）以及数字',
            ),
          );
        }
        callback();
      }
    };

    return {
      loginForm: {
        userName: '',
        password: '',
      },
      loginRules: {
        userName: [{ validator: validateUserName, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }],
      },
    };
  },
  mounted() {
    if (sessionStorage.getItem('loginTime')) {
      this.$message.error('登录已过期，请重新登录');
      sessionStorage.clear();
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          '/api/login',
          this.loginForm,
        );
        if (res.status !== 200) {
          this.$message.error(res.msg);
        } else {
          sessionStorage.setItem('userName', this.loginForm.userName);
          sessionStorage.setItem('loginTime', new Date().getTime());
          this.$message.success(res.msg);
          this.$router.replace('/home');
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.login-container {
  background-color: #2b4b6b;
  height: 100%;
}

.login-box {
  width: 450px;
  height: 300px;
  position: absolute;
  background-color: #fff;
  border-radius: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-form {
  position: absolute;
  bottom: 30px;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}

.register-style {
  font-size: 14px;
  color: #606266;
  float: right;
}
.register-style:hover {
  cursor: pointer;
  color: #409eff;
}
</style>
